import React from "react";
import { Link } from "react-router-dom";
import { Form, Col, Input, Row, Button, Select } from "antd";
import { LeftOutlined, AlignLeftOutlined } from "@ant-design/icons";

const { Option } = Select;

const getFields = () => {
  return (
    <React.Fragment>
      <Col span={24}>
        <div className="headAddShop">
          <Row>
            <Col span={8}>
              <LeftOutlined
                style={{
                  fontSize: 30,
                  paddingLeft: 10,
                  paddingTop: 10,
                  paddingBottom: 10,
                }}
              />
            </Col>
            <Col
              span={8}
              style={{ paddingLeft: 100, paddingTop: 10, paddingBottom: 10 }}
            >
              <span style={{ center: 30, fontSize: 20 }}>订单管理</span>
            </Col>
            <Col
              span={8}
              style={{
                paddingTop: 10,
                paddingBottom: 10,
                paddingRight: 10,
                paddingLeft: 160,
              }}
            >
              <Button style={{ background: "#FFC300" }}>
                <Link to="/order/place">下单</Link>
              </Button>
              <AlignLeftOutlined />
            </Col>
          </Row>
        </div>
      </Col>

      <Col span={8} style={{ marginTop: 30 }}>
        <Row className="divfix">
          <Col className="leftCommDiv" span={10}>
            状态
          </Col>

          <Col span={14}>
            <Form.Item name="status" style={{ height: 8 }}>
              <Select>
                <Option value="">所有</Option>
                <Option value="PLACED">已下单</Option>
                <Option value="PREPARING">制作中</Option>
                <Option value="PREPARED">已出餐</Option>
                <Option value="BILLED">已完成</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
      </Col>

      <Col span={8} style={{ marginTop: 30 }}>
        <Row className="divfix">
          <Col span={10} className="leftCommDiv">
            座位号
          </Col>

          <Col span={14}>
            <Form.Item name="tableNo">
              <Input />
            </Form.Item>
          </Col>
        </Row>
      </Col>
      <Col span={8} style={{ marginTop: 30 }}>
        <Row className="divfix">
          <Col span={10} className="leftCommDiv">
            就餐人数
          </Col>

          <Col span={14}>
            <Form.Item name="customerCount" style={{ height: 8 }}>
              <Input />
            </Form.Item>
          </Col>
        </Row>
      </Col>

      <Col span={4} className="leftCommDiv" style={{ marginLeft: 30 }}>
        订单总价
      </Col>
      <Col span={8} style={{ marginLeft: -20 }}>
        <Input.Group compact>
          <Form.Item name="from">
            <Input
              style={{ width: 100, textAlign: "center" }}
              placeholder="0"
            />
          </Form.Item>

          <Input
            className="site-input-split"
            style={{
              width: 30,
              borderLeft: 0,
              borderRight: 0,
              pointerEvents: "none",
              background: "white",
            }}
            placeholder="~"
            disabled
          />
          <Form.Item name="to">
            <Input
              className="site-input-right"
              style={{
                width: 100,
                textAlign: "center",
                borderLeft: 0,
              }}
              placeholder="9999"
            />
          </Form.Item>
        </Input.Group>
      </Col>
    </React.Fragment>
  );
};
export default getFields;
